<!--
 * @Date: 2023-10-13 10:47:59
 * @LastEditTime: 2023-10-21 01:56:58
 * 介绍:
-->
<cfg lang="json">
{
  "navigationBarTitleText": "主页",
  "enablePullDownRefresh": false,
  "navigationStyle": "custom"
}
</cfg>

<script setup lang="ts">
import router from "@/hooks/router";
import { _require } from "@/utils/tools";
import permision from "@/sdk/lib/wa-permission/permission";
import { uniShowModal } from "@/sdk/rewriteUni";
import {
  apiCreateRoom,
  CreateRoom,
  apiJoinRoom,
  apiDelRoom,
} from "@/api/module/call";
import { webviewPage } from "@/enum/pubsub";
import { randomNum } from "@/utils/tools/generate";
import useSysStore from "@/store/useSysStore";

const sysStore = useSysStore();
async function toMetting(query: string, delRoomData?: CreateRoom.Res) {
  if (uni.getSystemInfoSync().platform === "android") {
    const res1 = await permision.requestAndroidPermission(
      "android.permission.RECORD_AUDIO"
    );
    const res2 = await permision.requestAndroidPermission(
      "android.permission.CAMERA"
    );
    if (res1 != 1 || res2 != 1) {
      return permision.gotoAppPermissionSetting();
    }
  }
  if (delRoomData)
    uni.$once(webviewPage.unLoad, () => {
      apiDelRoom({ channel: delRoomData.channel.toString() });
    });
  await router.push("src/pages/web-view/web-view.vue", {
    query: {
      url: _require("src/static/aly-call/index.html") + query,
    },
  });
}
onLoad(() => {
  uni.hideTabBar();
});
async function createRoom() {
  let title = "请输入授权码(必填)";
  let placeholderText = title;
  let content = undefined;
  const authCode = sysStore.setting.authCode;
  if (authCode) {
    placeholderText = title = "变更授权码(选填)";
    content = "已授权的邀请码：" + authCode;
  }
  let { content: code } = await uniShowModal({
    title,
    content,
    placeholderText,
    editable: true,
    showCancel: false,
  });
  code ||= authCode;
  if (!code) return;
  const res = await apiCreateRoom({ code });
  if (!res) return;
  sysStore.setting.authCode = code;
  const query = coding(res);
  toMetting(query, res);
}
function coding(res: CreateRoom.Res) {
  const json = JSON.stringify({
    token: res.token,
    channel: res.channel.toString(),
    appid: res.appid,
    gslb: res.gslb,
    timestamp: res.timestamp,
    nonce: res.nonce,
    userid: res.user_id,
    isHost: false,
    mirror: true,
    width: 1280,
    height: 720,
  });
  const query = "?json=" + json;
  console.log(query);
  return query;
}
async function joinRoom() {
  const { content: channel } = await uniShowModal({
    title: "请输入房间号",
    placeholderText: "请输入房间号",
    editable: true,
    showCancel: false,
  });
  if (!channel) return;
  const res = await apiJoinRoom({ channel });
  if (!res) return;
  const query = coding(res);
  toMetting(query);
}
const inRefresh = ref(false);
function refresh() {
  inRefresh.value = true;
  uni.showLoading({
    title: "正在为您选择最优线路...",
  });
  setTimeout(() => {
    uni.hideLoading();
    inRefresh.value = false;
  }, randomNum(500, 5000));
}
onMounted(refresh);
</script>

<template>
  <CpageView :use-custom-navbar="false">
    <view class="content flex-J-SB flex-A-C flex-col">
      <view class="header T-A-R fill-W">
        <CinRefresh :inRefresh="inRefresh" @click="refresh" />
      </view>
      <view @click="createRoom" class="createBtn active">创建房间</view>
      <view @click="joinRoom" class="joinBtn active">加入房间</view>
      <view></view>
    </view>
  </CpageView>
</template>
<style lang="scss" scoped>
.content {
  height: var(--page-H);
}
.createBtn,
.joinBtn {
  $size: 300rpx;
  height: $size;
  width: $size;
  line-height: $size;
  text-align: center;
  border-radius: 999rpx;
  color: var(--C-B1);
}
.createBtn {
  background-color: #0f46f8;
}
.joinBtn {
  background-color: #680ff8;
}
</style>
